<template>
  <div class="left-scpjsj">
    <div class="tab-title">
      <span class="dec">塘栖枇杷果园热度排行</span>
    </div>
    <div class="tab-content" :class="isHall?'tab-content1':''">
        <div class="title-bar">
                <span>排名</span>
                <span>果园名称</span>
                <span>果园面积 (亩)</span>
                <span>访问量 (人)</span>
        </div>
        <div class="rant-contect">
            <vue-seamless-scroll
            :data="dataList"
            :class-option="isHall?classOption1:classOption"
            >
                <template v-for="(item,index) in dataList">
                    <div :key="index" class="rank" :class="`${(index+1)%2 ==0?'oushu':'jishu'}`">
                      <template v-if="index<3">
                        <div class="order">
                         <img :src="item.rank" alt="">
                        </div>
                      </template>
                      <template v-else>
                        <div class="order">
                         {{index+1}}
                        </div>
                      </template>
                        <div class="name">  {{item.name}} </div>
                        <div class="area">{{item.area}}</div>
                        <div class="visit">{{item.pvHeat}}</div>
                    </div>
                </template>
            </vue-seamless-scroll>
        </div>
    </div>
  </div>
</template>
<script>
import { getpvRankListdp } from '@/api/dashboards'
export default {
  props:{
      isHall:{
          type:Number
      }
  },
  data(){
    return{
        dataList:[
            // {
            //     rank:require('../../assets/no1.png'),
            //     name:'塘北果园',
            //     area:6799,
            //     visit:9323
            // },
            // {
            //     rank:require('../../assets/no2.png'),
            //     name:'农夫果园',
            //     area:6799,
            //     visit:9323
            // },
            // {
            //     rank:require('../../assets/no3.png'),
            //     name:'好大大农产品果园',
            //     area:6799,
            //     visit:9323
            // },
        ]
    }
  },
   watch: {
      isHall:{
          immediate: true,
          handler: function(val) {
              if(val){
              }
          }
      },
  },
  created(){
  },
  computed: {
    classOption() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 32, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption1() {
      return {
        step: 0.3, // 数值越大速度滚动越快
        limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 32, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    this.getpvRankListdp()
  },
  methods: {
    async getpvRankListdp() {
      let res = await getpvRankListdp()
      this.dataList = res.result&&res.result.length&&res.result
      this.dataList.map((item,index)=>{
        if(index===0){
          item.rank = require('../../assets/no1.png')
        }else if(index===1){
          item.rank = require('../../assets/no2.png')
        }else if(index===2){
          item.rank = require('../../assets/no3.png')
        }
      })
    },
    showMask(){
        this.show = !this.show
    },
    getDate(date) {
        this.selectYear = date
    },
    close(){
        this.show = false
        console.log(this.show);
    },
    swiperImg(){
      setInterval(() => {
        
      }, 5000);
      for (const i in object) {
        if (Object.hasOwnProperty.call(object, key)) {
          const element = object[key];
          interval
        }
      }
    }
  },
}
</script>
<style lang="less" scoped>
.left-scpjsj {
  width: 360px;
  height: 192px;
  color: #fff;
  .tab-title {
      padding: 24px 10px 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
    .unit{
        padding-right: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
        cursor: pointer;
    }
   
  }
  .tab-content1{
     height: 196px !important;
  }
  .tab-content {
        width: 100%;
        height: 128px;
        overflow: hidden;
        color: #fff;
         margin:16px 0;
        padding: 0 24px;
        .title-bar {
      height: 28px;
      line-height: 34px;
      color: rgba(255, 255, 255, 0.4);
      font-size: 12px;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 0.04);
      span{
        &:nth-child(1) {
        width: 36px;
        text-align: left;
      }
       &:nth-child(2) {
        width: 117px;
        text-align: left;
      }
       &:nth-child(3) {
        width: 84px;
        text-align: left;
      }
       &:nth-child(4) {
        width: 72px;
        text-align: left;
      }
    }
       }
       .rant-contect{
         overflow: hidden;
         .oushu{
             background: rgba(255, 255, 255, 0.04);
         }
       .rank{
        // width: 214px;
        height: 32px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 12px;
          padding: 5px 0px;
          .order{
            width: 36px;
            text-align: left;
            img{
              width: 14px;
              height: 17px;
            }
          }
         .name{
            width: 117px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
         }
          .area {
             width: 84px;
            text-align: left;
              white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
         }
          .visit {
             width: 72px;
            text-align: left;
              white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
         }
     }
    }
    }
}
</style>